<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>顶点索引</title></title>
    <link rel="stylesheet" href="../css/base.css" />
  </head>
  <body>
    <div class="box"></div>

    <script src="../js/three.js"></script>
    <script type="module">
      import {
        createBaseObj,
        testAnimation,
        createViewController,
        addHelpLine,
      } from '../js/myThree.js'

      const oBox = document.getElementsByClassName('box')[0]
      const { scene, camera, renderer } = createBaseObj(oBox)

      /** 初始 */
      const init = () => {
      addHelpLine(scene)
        drawClassContent()
        animation()
      }

      /** 绘制课程内容 */
      const drawClassContent = () => {
        const geometry = new THREE.BufferGeometry()

        /**
         * 不使用顶点索引
         * 会存在重复顶点坐标
         * */
        var vertices = new Float32Array([
          0, 0, 0,
          80, 0, 0,
          80, 80, 0,

          0, 0, 0,
          80, 80, 0,
          0, 80, 0,
        ])

        const attribute = new THREE.BufferAttribute(vertices, 3)

        geometry.setAttribute('position', attribute)

        var normals = new Float32Array([
          0, 0, 1,
          0, 0, 1,
          0, 0, 1,

          0, 0, 1,
          0, 0, 1,
          0, 0, 1,
        ])



        geometry.setAttribute('normal', new THREE.BufferAttribute(normals, 3))

        const material = new THREE.MeshBasicMaterial({
          color: 0x00ff11,
          side: THREE.DoubleSide, // 两面可见
          // wireframe: true
        })

        const idxs = new Uint16Array([
          0, 1, 2,
          0, 2, 3,
        ])

        var vertices_b = new Float32Array([
          0, 0, 0,
          80, 0, 0,
          80, 80, 0,
          0, 80, 0,
        ])
        var normals_b = new Float32Array([
          0, 0, 1,
          0, 0, 1,
          0, 0, 1,
          0, 0, 1,
        ])

        const geometry_b = new THREE.BufferGeometry()
        geometry_b.setAttribute('position', new THREE.BufferAttribute(vertices_b, 3))
        geometry_b.setAttribute('normal', new THREE.BufferAttribute(normals_b, 3))
        geometry_b.index = new THREE.BufferAttribute(idxs, 1)

        console.log('test', geometry, geometry_b)


        const mesh = new THREE.Mesh(geometry_b, material)
        scene.add(mesh)
      }

      /** 渲染中 */
      const doSth = () => {}

      const control = createViewController(renderer.domElement, camera)
      const animation = testAnimation({ scene, camera, renderer }, doSth)

      init()
    </script>
  </body>
</html>
